<!--
 * @Author: 黄宇/Hyuishine
 * @Date: 2022-05-17 18:07:05
 * @LastEditors: 黄宇/Hyuishine
 * @LastEditTime: 2024-05-14 16:36:47
 * @Description: 
 * @Email: hyuishine@gmail.com
 * @Company: 3xData
 * @youWant: add you want
-->
<template>
  <view class="container_Page">

    <!-- 顶部自定义导航栏 -->
    <action-bar :options="navOptions" />

    <view>
      <view class="formItem">
        <view class="label">用户昵称</view>
        <input class="content"
               @blur="labelLength('用户昵称',form.userName,true,64)"
               v-model="form.userName"
               placeholder="请输入昵称" />
      </view>

      <view class="formItem">
        <view class="label">手机号码</view>
        <input class="content"
               @blur="labelLength('手机号码',form.phone,true,64)"
               v-model="form.phone"
               placeholder="请输入手机号码" />
      </view>

      <view class="formItem">
        <view class="label">邮箱</view>
        <input class="content"
               @blur="labelLength('邮箱',form.email,true,64)"
               v-model="form.email"
               placeholder="请输入邮箱" />
      </view>

      <view class="formItem">
        <view class="label">性别</view>
        <view class="content">
          <radio-group @change="radioChange">
            <radio value="0"
                   :checked="form.sex == 0"
                   style="margin-right: 10rpx;transform:scale(0.7)"><span style="margin-left: 10rpx;">男</span></radio>
            <radio value="1"
                   :checked="form.sex == 1"
                   style="transform:scale(0.7)"><span style="margin-left: 10rpx;">女</span></radio>
          </radio-group>
        </view>
      </view>
    </view>
    <view class="btn-box"
          @click.stop="sure">
      保存
    </view>
    <toast></toast>
  </view>
</template>
<script>
export default {
  data () {
    return {
      navOptions: { // 导航栏配置参数
        left: {
          icon: 'back'
        },
        center: {
          title: '个人信息'
        }
      },
      form: {
        userName: '',
        phone: '',
        email: '',
        sex: 0
      },
      loading: false,
    }
  },
  created () {
    this.getUserInfo()
  },
  methods: {
    getUserInfo () {

      if (this.loading) return

      this.loading = true
      uni.showLoading({
        title: '正在加载请稍后',
        mask: true
      });

      let data = {
        dist: {},
        method: 'get'
      }
      // 获取用户信息
      this.$store.dispatch('getUserInfo', data)
        .then(res => {
          if (res && res.code === 200) {
            this.form = res.data
          }
        })
        .finally(() => {
          let timer = setTimeout(() => {
            this.loading = false
            uni.hideLoading();
            clearTimeout(timer)
          }, 3000);
        })
    },
    // 保存
    sure () {
      if (this.loading) return

      this.loading = true
      uni.showLoading({
        title: '正在加载请稍后',
        mask: true
      });
      if (this.form.userName === '' || !this.form.userName ||
        this.form.phone === '' || !this.form.phone ||
        this.form.email === '' || !this.form.email) {
        this.$showToast({
          show: true,
          text: '个人信息未填写完整，请完善后再保存！'
        });
      } else {
        let data = {
          dist: this.form,
          method: 'put'
        }
        if (!this.isMobile(this.form.phone)) {
          this.$showToast({
            show: true,
            text: '手机号码有误，请重新输入'
          });
        } else if (!this.isEmils(this.form.email)) {
          this.$showToast({
            show: true,
            text: '邮箱有误，请重新输入'
          });
        } else {
          this.$store.dispatch('getUserInfo', data)
            .then(res => {
              if (res && res.code === 200) {
                this.$showToast({
                  show: true,
                  text: '修改成功'
                });
                setTimeout(() => {
                  uni.navigateBack()
                }, 1000)
              }
            })
            .finally(() => {
              let timer = setTimeout(() => {
                this.loading = false
                uni.hideLoading();
                clearTimeout(timer)
              }, 3000);
            })
        }
      }
    },
    isMobile (mobile) {
      return /^1[3-9]\d{9}$/.test(mobile)
    },
    isEmils (email) {
      return /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(email)
    },

    radioChange (e) {
      this.form.sex = e.detail.value
    },

    // 校验（label:描述，prop:属性值，length:字符长度,isLength:是否进行字符长度判断）
    labelLength (label, prop, isLength, length) {
      return new Promise((resovle, reject) => {
        if (prop.length == 0) {
          reject(label + '不能为空')

          this.$showToast({
            show: true,
            text: label + '不能为空'
          });
        } else {
          resovle(true)
        }
        // 如果为真进行长度判断
        if (isLength) {
          if (prop.length > length) {
            reject(label + '不能长于' + length + '字符')

            this.$showToast({
              show: true,
              text: label + '不能长于' + length + '字符'
            });
          } else {
            resovle(true)
          }
        }
      })
    },
  }
}
</script>

<style lang="less" scoped>
.formItem {
  display: flex;
  align-items: center;
  height: 100rpx;
  line-height: 100rpx;
  padding: 0 24rpx;

  .label {
    color: #333;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 36rpx;
    width: 40%;
  }

  .content {
    flex: 1;
    text-align: right;

    .radio {
      font-size: 28rpx;
    }
  }
}

.btn-box {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background: #335ac6;
  position: fixed;
  z-index: 999;
  bottom: 0;
  text-align: center;
  font-size: 30rpx;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #ffffff;
}

.btn-box:hover {
  cursor: pointer;
}
</style>
